<template>
<div>
    <div class="navBar_header_box">
        <div class="navBar_box" @click="navBarClick">
            <div class="navBar_box_item" v-for="(item,index) in navList" :key="index" :id="item.id">{{item.value}}</div>
        </div>
        <div class="add_item" @click="addItemClick">
            +
        </div>
    </div>
    <div  id="popup">
        <mt-popup
        v-model="showDialog" popup-transition="popup-fade">
        ...
        </mt-popup>
    </div>
</div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      showDialog: false,
      navList: [
        { id: 1, value: "电影" },
        { id: 2, value: "网播" },
        { id: 3, value: "情报" },
        { id: 4, value: "榜单" }
      ]
    };
  },
  methods: {
    navBarClick(event) {
      console.log(event.target.id);
    },
    addItemClick() {
      this.showDialog = true;
    }
  }
};
</script>
<style  scoped>
#popup >>> .v-modal {
  background: #fff !important;
  opacity: 1;
}
.navBar_header_box {
  width: 100%;
  display: flex;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
}
.navBar_box {
  width: 90%;
  display: flex;
  justify-content: space-around;
}
.navBar_box_item {
  width: 100%;
  text-align: center;
}
.add_item {
  width: 10%;
}
</style>
